<template>
  <div class="full-width d-flex-c">
    <div
      class="panel-title-bg flex-between"
    >
      <div
        class="flex-ai-c panel-title"
        :class="{'active':visibleLayerId===layerId}"
        @click="changeLayerVisible(layerId)"
      >
        <i class="ri-map-pin-5-fill  m-r-7 f-20" />
        <div class="panel-title-text flex-0 m-r-s flex-ai-c">
          地下水站<span>({{ dxsTotal }})</span>
        </div>
      </div>

      <div class="flex-ai-c">
        <el-date-picker
          class="blue-select blue-date-picker"
          popper-class="blue-select-dropdown"
          v-model="month"
          type="month"
          size="mini"
          prefix-icon=""
          :clearable="false"
          :picker-options="pickerOptions"
          placeholder="选择年月"
        />
      </div>
    </div>
    <div class="d-flex-c panel-box-outline full-width flex-1">
      <div class="flex-1 panel-table">
        <BKTable
          :columns="columns"
          :data="tableData"
          :has-pager="false"
          border="none"
          :highlight-current-row="true"
          :stripe="false"
          :has-seq="false"
          :span-method="tableSpanMethod"
          :cell-class-name="headerCellMerge"
          :min-width="506"
          auto-resize
          :row-class-name="rowClassName"
          class="ysqxx-table column-merging"
          @cell-click="currentChange"
        />
      </div>

      <div class="flex-0 overflow-hidden panel-chart position-relative">
        <el-radio-group
          v-show="chartOption"
          v-model="currentDASL"
          class="deep-change"
          size="mini"
        >
          <el-radio-button label="2">
            深层
          </el-radio-button>
          <el-radio-button label="1">
            浅层
          </el-radio-button>
        </el-radio-group>

        <BKChart
          :option="chartOption"
          @click="handleClickChart"
        />
        <!-- <el-empty
          v-show="!chartOption"
          :image-size="80"
          class="full-box m-a-s"
        /> -->
      </div>
    </div>
    <SwswModal ref="dxsModal" />
  </div>
</template>
<script>
import { getBarOption } from '@/components/chart/echart-utils'
import MapMixins from '@/utils/mixins/map-one.mixins.js'
import { mapState } from 'vuex'
import { dxsLayerId } from '../../variable'
import SwswModal from '../../components/business/swsw-modal.vue'

const DASLMap = {
  1: '浅层',
  2: '深层'
}
export default {
  name: 'YsqxxGroundWater',
  mixins: [MapMixins],
  components: { SwswModal },
  data () {
    return {
      columns: [
        {
          title: '行政区划',
          field: 'XZQMC',
          width: 80
        },
        // {
        //   title: '深浅层情况',
        //   field: 'DASL',
        //   width: 70,
        //   slots: {
        //     header: () => {
        //       return [
        //         <div class="d-flex-c ai-c">
        //           <span>深浅层</span>
        //           <span>情况</span>
        //         </div>
        //       ]
        //     },
        //     default: ({ row }) => {
        //       return [
        //         <div class="">
        //           {DASLMap[row.DASL]}
        //         </div>
        //       ]
        //     }
        //   }
        // },
        // {
        //   title: '站点个数',
        //   field: 'NUM',
        //   width: 60,
        //   slots: {
        //     header: () => {
        //       return [
        //         <div class="d-flex-c ai-c">
        //           <span>站点</span>
        //           <span>个数</span>
        //         </div>
        //       ]
        //     }
        //   }
        // },
        {
          title: '深浅层站点情况',
          field: 'DASL',
          width: 140,
          slots: {
            header: () => {
              return [
                <div class="d-flex-c ai-c">
                  <span>深浅层</span>
                  <span>站点情况</span>
                </div>
              ]
            },
            default: ({ row }) => {
              return [
                <div class="flex-between  full-box">
                  <div class='flex-ai-c jc-c right-border full-height flex-1  half-width' > {DASLMap[row.DASL]}</div>
                  <div class='flex-ai-c jc-c full-height half-width flex-1'> {row.NUM}个</div>
                </div>
              ]
            }
          }
        },
        {
          title: '当期地下水平均埋深（m)',
          field: 'WLD',
          width: 110,
          slots: {
            header: () => {
              return [
                <div class="d-flex-c ai-c">
                  <span>当期地下水</span>
                  <span>平均埋深（m)</span>
                </div>
              ]
            },
            default: ({ row }) => {
              return [
                <div>
                  {(row.WLD).toFixed(2) }
                </div>
              ]
            }
          }
        },
        {
          title: '与上年同期相比',
          field: 'YEAR_WLD',
          width: 90,
          slots: {
            header: () => {
              return [
                <div class="d-flex-c ai-c">
                  <span>与上年</span>
                  <span>同期相比</span>
                </div>
              ]
            },
            default: ({ row }) => {
              return [
                <div class="flex-ai-c jc-c">
                  {(row.YEAR_WLD - row.WLD).toFixed(2) }
                  {
                    row.YEAR_WLD !== row.WLD && (row.YEAR_WLD > row.WLD ? (<BKSvgIcon
                      icon-class='svg-ysqxx-arrow-up'
                      class='f-12 m-l-tiny'
                      style='transform:scale(0.8)'/>) : (<BKSvgIcon
                      icon-class='svg-ysqxx-arrow-down'
                      class='f-12 m-l-tiny'
                      style='transform:scale(0.8)'/>))
                  }
                </div>
              ]
            }
          }
        },
        {
          title: '与上月同期相比',
          field: 'MONTH_WLD',
          width: 90,
          slots: {
            header: () => {
              return [
                <div class="d-flex-c ai-c">
                  <span>与上月</span>
                  <span>同期相比</span>
                </div>
              ]
            },
            default: ({ row }) => {
              return [
                <div class="flex-ai-c jc-c">
                  {(row.MONTH_WLD - row.WLD).toFixed(2) }
                  {
                    row.MONTH_WLD !== row.WLD && (
                      row.MONTH_WLD > row.WLD ? (<BKSvgIcon
                        icon-class='svg-ysqxx-arrow-up'
                        class='f-12 m-l-tiny'
                        style='transform:scale(0.8)'/>) : (<BKSvgIcon
                        icon-class='svg-ysqxx-arrow-down'
                        class='f-12 m-l-tiny'
                        style='transform:scale(0.8)'/>)
                    )
                  }
                </div>
              ]
            }
          }
        }
      ],
      tableData: [],
      month: '2024-03-01',
      chartOption: null,
      currentDASL: '1', // 深层2,浅层1
      activeRowCity: '',
      dxsTotal: 0,
      layerId: dxsLayerId,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  async mounted () {
    await this.getTableData()
  },
  computed: {
    ...mapState('ysqxx', ['visibleLayerId'])
  },
  watch: {
    month: {
      immediate: false,
      async handler (v) {
        await this.getTableData()
      }
    },
    currentDASL: {
      immediate: false,
      async handler (v) {
        this.setChartOption()
      }
    }
  },
  methods: {
    async getTableData () {
      const { rows } = await this.$request.singleTableOperation({
        appId: 'YSJC',
        bzCode: 'YSJC',
        url: '/grid/getTableData',
        metaSet: 'YSQJC_UW_ZDJBXX',
        methodCode: 'selectYsjcUWDxsTjList',
        methodParams: {
          queryParam: { SEARCH_TIME: this.$utils.formatDate(this.month, 'YYYY-MM-DD') },
          columnOrderParam: null,
          simpleQueryParam: [],
          columnFilterParam: []
        }
      })
      const { rows: totalData } = await this.$request.singleTableOperation({
        appId: 'YSJC',
        bzCode: 'YSJC',
        url: '/grid/getTableData',
        metaSet: 'YSQJC_UW_ZDJBXX',
        methodCode: 'get_countDXS',
        methodParams: {}
      })
      this.dxsTotal = totalData[0].COUNTNUM
      this.tableData = rows
      this.setChartOption()
    },
    setChartOption () {
      const data = this.tableData.filter(item =>
        item.DASL === this.currentDASL
      )
      const result = getBarOption({
        yAxisName: 'm',
        xAxis: data.map(r => r.XZQMC),
        hasLegend: true,
        isArea: true,
        series: [
          {
            name: '当前时间',
            type: 'line',
            color: '#45BBFF',
            data: data.map(r => {
              return {
                ...r,
                value: r.WLD
              }
            })
          },
          {
            name: '上年同期',
            type: 'line',
            color: '#07FFDE',
            data: data.map(r => {
              return {
                ...r,
                value: r.YEAR_WLD
              }
            })
          }
        ]
      })
      result.xAxis.axisLabel.color = '#C4CBD9'
      result.yAxis.axisLabel.color = '#C4CBD9'
      result.xAxis.axisLine = {
        show: true,
        lineStyle: {
          color: 'rgba(233,237,240,0.1)'
        }
      }
      result.xAxis.axisLabel.rotate = 40
      result.xAxis.axisLabel.interval = 0
      result.yAxis.splitLine.show = false
      result.yAxis.axisLine = {
        show: true,
        lineStyle: {
          color: 'rgba(233,237,240,0.1)'
        }
      }
      result.yAxis.nameTextStyle = {
        color: '#C4CBD9',
        fontSize: '14px',
        padding: [0, 0, 0, -20]
      }
      result.legend = {
        ...result.legend,
        icon: 'rect',
        itemWidth: 13,
        itemHeight: 1,
        textStyle: {
          color: '#FFFFFF'
        }
      }
      if (!data.length) {
        result.grid.left = 20
      }
      result.grid.bottom = 2
      result.tooltip.appendToBody = true
      this.chartOption = result
    },
    tableSpanMethod ({ row, _rowIndex, column, visibleData }) {
    // 需要合并的列字段
      const fields = ['XZQMC']
      const cellValue = row[column.property]
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (prevRow && prevRow[column.property] === cellValue) {
          row.classStripe = prevRow.classStripe
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex]
          }
          // 斑马纹样式
          // if (prevRow) {
          //   row.classStripe = !prevRow.classStripe
          // } else if (nextRow) {
          //   row.classStripe = !nextRow.classStripe
          // }
          // 合并行点击高亮参数

          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    },
    headerCellMerge ({ column, $rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        return 'cell-merage'
      }
      return ''
    },
    rowClassName ({ row }) {
      if (row.CITY === this.activeRowCity) return 'active-row'
    },
    async currentChange ({ row }) {
      this.activeRowCity = this.activeRowCity === row.CITY ? '' : row.CITY
      if (!this.activeRowCity) {
        await this.createLayerByCity(row.CITY, [], false)
        this.$mapManager.emit('updateLayer')
        return
      }
      const { rows } = await this.$request.singleTableOperation({
        url: '/grid/getTableData',
        metaSet: 'YSQJC_UW_ZDJBXX',
        methodCode: 'selectYsjcUWDxsTjByCityCodeList',
        methodParams: {
          queryParam: {
            CITY: row.CITY
          }
        }
      })
      await this.createLayerByCity(row.CITY, rows, true)
      this.$mapManager.emit('updateLayer')
      await this.$mapManager.invoke('setCenterAndZoom', [rows[0].LGTD, rows[0].LTTD], 8, false)
    },
    changeLayerVisible (layId) {
      const visible = this.visibleLayerId !== layId
      this.visibleLayerId === layId ? this.$store.commit('ysqxx/setVisibleLayerId', '') : this.$store.commit('ysqxx/setVisibleLayerId', layId)
      this.$emit('changeLayerVisible', layId, visible)
    },
    handleClickChart (data) {
      this.$nextTick(() => {
        this.$refs.dxsModal.openModal(
          {
            params: { CITY: data.data.CITY, SEARCH_TIME: this.month },
            chartData: data.data,
            layId: this.layerId
          }
        )
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.blue-select.blue-date-picker {
  width: 120px !important;
}

.panel-table {
  margin-bottom: 12px;
}

.blue-select {
  width: 120px;
}

.deep-change {
  position: absolute;
  right: 10px;
  top: 5px;
  z-index: 3;
  border: 1px solid #0355ce !important;
  border-radius: 4px;
  overflow: hidden;

  ::v-deep .el-radio-button {
    .el-radio-button__inner {
      font-size: 14px;
      width: 49px;
      height: 24px;
      line-height: 24px;
      padding: 0;
      color: #c4cbd9;
      background: #012d61;
    }

    &:first-child .el-radio-button__inner {
      border: none;
    }

    &:last-child .el-radio-button__inner {
      border: none;
    }

    &.is-active .el-radio-button__inner {
      background: #0355ce;
      color: #fff;
    }
  }
}

::v-deep.ysqxx-table {
  .vxe-body--column.cell-merage {
    padding: 0 !important;

    .vxe-cell {
      height: 100% !important;
      padding: 0 !important;
    }

    .right-border {
      border-right: 1px solid;
      border-image: linear-gradient(0deg, rgba(37, 101, 159, 0) 0%, #5cadff 49%, #042e61 99%) 1 1;
    }
  }
}

</style>
